﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../_scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <style type="text/css">
     
        .resizebox
        {
            width: 300px;
            height: 200px;
            background-color: #666;
        }
        .fixedbox
        {
            width: 100px;
            height: 100px;
            background-color: #777;
        }
        .containerA
        {
            width: 300px;
            height: 200px;
            border: solid 5px #ddd;
            background-color: #b2c3d9;
            margin: 600px auto;
        }
        .containerB
        {
            width: 300px;
            height: 200px;
            border: 2px; /*border: solid 5px #eee;*/
            position: relative;
            top: -290px;
            left: -290px;
        }
        #pointA
        {
            position: fixed;
            width: 2px;
            height: 2px;
            background: red;
            z-index:100;
        }
         #pointB
        {
            position: fixed;
            width: 2px;
            height: 2px;
            background: green;
            z-index:100;
        }
    </style>
</head>
<body>
    <div class="containerA">
        <div class="containerB">
            <div class="resizebox">
            </div>
        </div>
    </div>
    <div id="pointA">
    </div>
    <div id="pointB">
    </div>
    <script type="text/javascript">

        $('.containerB').draggable();
        
        var org_width = 300;
        $('.resizebox').dblclick(function (e) {
            if ($(this).width() == org_width) {
                $(this).css({ position: 'relative' });
                $(this).css({ width: '100px', height: '100px' });


                offset = $('.containerB').offset();

                left_big = (e.pageX - offset.left);
                top_big = (e.pageY - offset.top);


                left_small = left_big / $('.containerB').width() * $(this).width();
                top_small = top_big / $('.containerB').height() * $(this).height();

                leftdiff = left_big - left_small;
                topdiff = top_big - top_small;


                newpos = {
                    left: leftdiff,
                    top: topdiff
                };
                $(this).css(newpos);

                //set pointA
                $('#pointA').css({ left: $(this).offset().left, top: $(this).offset().top });
                //set pointB
                $('#pointB').css({ left: $('.containerB').offset().left, top: $('.containerB').offset().top });

                newpos_cont = {
                    left: parseInt($('.containerB').css('left')) + newpos.left,
                    top: parseInt($('.containerB').css('top')) + newpos.top
                };
                $('.containerB').css(newpos_cont);
                $('.containerB').css({ width: '100px', height: '100px' });
                $(this).css({ left: 0, top: 0 });

            } else {
                $(this).css({ width: '300px', height: '200px' });
                $(this).css({ left: 0, top: 0 });
            }
        });
    </script>
</body>
</html>
